<template>
<div>
<div class="header" >
        <ul class="title" @mouseenter="enter" @mouseleave="leave" >
            <li class="list-first">官网首页</li>
            <li class="list-item" v-for='(item,index) of list' :key='index' @mouseenter="enter" :ind ="index">{{item}}
                
            </li>
           <li class="hoved" v-if="show&&showlist.length">
               <div class="ground">
                    <div class="img" v-for="(item,index) of showlist " :key="index" >
                        <img class="img-item" :src="item" alt="">
                    </div>
               </div>
               
               
           </li>
        </ul>
        
    </div>
    <div class="light"></div>
</div>
    
</template>
<script>
import { setInterval } from 'timers';
export default {
    name: "indexHeaer",
    props: ["content"],
    data: function(){
        return{
            "showlist": [],
            "show": true,
            "list":["新闻咨讯","式神录","游戏攻略","同人社区","泛娱乐","视听中心","周边商城","藏宝阁","官方渠道","IP新游预约"],
            "index": 0,
            "speed": .4
        }
    },
    methods: {
        enter(e,index){
            if($(e.target)[0].nodeName === "LI"){
              
                $(e.target).css({
                    "color": "#212121",
                    "background": "url(/static/img/banner2.jpg) -10px 0 no-repeat"
                }).siblings().css({
                    "background": '',
                    "color": "#fff"
                })
                let index = $(e.target).attr('ind')
                this.showlist = this.content[index]||[]   
            }
            if($(e.target)[0].nodeName!=="DIV"){
                this.show = true;
            }
            
            
        },
        leave(){
            this.show = false;
            $(".list-item").css({"background":'',"color": "#fff"})
        },
        m(){
        
            this.index+=this.speed
            if(this.index>=20||this.index<=-20){
                this.speed = -this.speed
    
            }
            $(".light").css({
                "transform": `rotateZ(${this.index}deg)`
            })
            requestAnimationFrame(this.m)
        }
    },
    mounted(){
        this.m()
    }
        
      
        
        
    
}
</script>

<style lang="stylus" scoped>
    .header 
        position: fixed
        top: 0
        width: 100%
        min-width: 1200px
        z-index: 99
        height: 1.4rem
        background: url(/static/img/banner1.jpg) center top no-repeat
        .title
            margin: 0 auto
            width: 85%
            height: 100%
            .list-first
                background: url(/static/img/banner2.jpg) -10px 0 no-repeat;               
                display: inline-block
                height: 100%
                width: 1.8rem
                line-height: 1.2rem
                font-size: .28rem
                text-align: center
                color: #212121!important
            .list-item
                display: inline-block;
                height: 100%
                width: 1.8rem
                line-height: 1.2rem
                font-size: .28rem
                text-align: center;
                color: #fff
            .list-item:hover
                color: #212121
            // .list-item:hover .hoved  
            //     display: block  
        .hoved
            position: absolute
            left: 0
            right: 0
            margin-top: -.2rem
            width: 100%
            height: 2.9rem
            background: rgb(180,144,78)
            color: #212121
            overflow: hidden
            .ground
                display: flex
                justify-content: space-between
                margin: .2rem auto;
                height: 100%
                width: 70%
                .img
                    display: inline-block
                    width: 4rem
                    height: 100%
                    .img-item
                        width: 100%
    .light
        position: absolute
        right: 24px
        top: 50px
        z-index: 2
        width: 3.54rem
        height: 3.62rem
        background: url(/static/img/light.png) no-repeat;
        transform: rotateZ(0deg)
        transition: .3s
        transform-origin: 88px 0
                        


</style>
